<template>
  <div>
    <!-- <el-dialog
      v-model="show"
      title="新建检查反馈（安全技术交底）"
      width="38vw"
      destroy-on-close
      @close="handleCancel"
    > -->
    <el-form
      :model="formData"
      label-width="120px"
      ref="formDataRef"
      :rules="formRules"
    >
      <el-form-item label="检查方法" prop="insMethod">
        <el-input v-model="formData.insMethod" disabled></el-input>
      </el-form-item>

      <el-form-item label="是否合格" prop="isQualifiedCheck">
        <el-radio-group v-model="formData.isQualifiedCheck">
          <el-radio label="1">合格</el-radio>
          <el-radio label="0">不合格</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 举牌验收照片 -->
      <el-form-item label="举牌验收照片" prop="jpysAttachment">
        <el-upload
          class="back-picture"
          name="uploadFile"
          multiple
          list-type="picture-card"
          v-model:file-list="formData.jpysAttachment"
          :accept="acceptTypes"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :on-change="
            (file, fileList) => {
              handleChange(file, fileList, '1');
            }
          "
          :on-success="handleSuccess"
          :on-remove="
            (file, fileList) => {
              handleRemove(file, fileList, '1');
            }
          "
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePreview"
        >
          <!-- <i class="el-icon-plus" :size="56">上传</i> -->
          <el-icon class="el-icon-plus" :size="56">
            <span>上传</span>
          </el-icon>
        </el-upload>
      </el-form-item>

      <!-- 主要控制项目测量照片 -->
      <el-form-item label="主要控制项目测量照片" prop="kzxmclAttachment">
        <el-upload
          class="back-picture"
          name="uploadFile"
          multiple
          list-type="picture-card"
          v-model:file-list="formData.kzxmclAttachment"
          :accept="acceptTypes"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :on-change="
            (file, fileList) => {
              handleChange(file, fileList, '2');
            }
          "
          :on-success="handleSuccess"
          :on-remove="
            (file, fileList) => {
              handleRemove(file, fileList, '2');
            }
          "
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePreview"
        >
          <!-- <i class="el-icon-plus" :size="56">上传</i> -->
          <el-icon class="el-icon-plus" :size="56">
            <span>上传</span>
          </el-icon>
        </el-upload>
      </el-form-item>

      <!-- 验收人员名单 -->
      <el-form-item label="验收人员名单" prop="ysrymdAttachment">
        <el-upload
          class="back-picture"
          name="uploadFile"
          multiple
          list-type="picture-card"
          v-model:file-list="formData.ysrymdAttachment"
          :accept="acceptTypes"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :on-change="
            (file, fileList) => {
              handleChange(file, fileList, '3');
            }
          "
          :on-success="handleSuccess"
          :on-remove="
            (file, fileList) => {
              handleRemove(file, fileList, '3');
            }
          "
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePreview"
        >
          <!-- <i class="el-icon-plus" :size="56">上传</i> -->
          <el-icon class="el-icon-plus" :size="56">
            <span>上传</span>
          </el-icon>
        </el-upload>
      </el-form-item>

      <!-- 验收人员照片 -->
      <el-form-item label="验收人员照片" prop="ysryzpAttachment">
        <el-upload
          class="back-picture"
          name="uploadFile"
          multiple
          list-type="picture-card"
          v-model:file-list="formData.ysryzpAttachment"
          :accept="acceptTypes"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :on-change="
            (file, fileList) => {
              handleChange(file, fileList, '4');
            }
          "
          :on-success="handleSuccess"
          :on-remove="
            (file, fileList) => {
              handleRemove(file, fileList, '4');
            }
          "
          :on-error="handleError"
          :before-upload="beforeAvatarUpload"
          :on-preview="handlePreview"
        >
          <!-- <i class="el-icon-plus" :size="56">上传</i> -->
          <el-icon class="el-icon-plus" :size="56">
            <span>上传</span>
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="检查小结" prop="insSummary">
        <el-input
          type="textarea"
          v-model="formData.insSummary"
          :rows="3"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="乙方处理人"
        prop="partybHandlerInfo"
        v-if="formData.isQualifiedCheck === '0'"
      >
        <el-select
          v-model="formData.partybHandlerInfo"
          filterable
          clearable
          remote
          placeholder="请输入姓名搜索"
          :remote-method="getUserData"
          value-key="value"
          style="width: 100%"
        >
          <el-option
            v-for="item in userList"
            :key="item.value"
            :label="item.label"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSure">保存</el-button>
        </span>
      </template> -->
    <!-- </el-dialog> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, toRef } from "vue";
import { getUserList } from "/@/api/user";
import { acceptTypes, uploadUrl } from "../types";
import { handleError, handlePreview, beforeAvatarUpload } from "../utils";
import { storageLocal } from "/@/utils/storage";
export default defineComponent({
  name: "approveDialog",
  props: {
    checkItem: {
      type: Object,
      default: () => {}
    }
  },
  setup(props) {
    const uploadHeaders = {
      Authorization: storageLocal.getItem("info")?.accessToken
    };
    const show = ref(true);
    const formDataRef = ref<HTMLFormElement | null>(null) as any;
    const checkItemProp = toRef(props, "checkItem");
    const state = reactive({
      formData: {
        approveStatus: "",
        checkItemId: checkItemProp.value.id,
        insMethod: checkItemProp.value.checkMethod,
        isQualifiedCheck: "",
        isChargehand: "1",
        handlerType: "",
        insSummary: "",
        partybHandlerId: "",
        partybHandlerName: "",
        partybHandlerInfo: "" as any,
        jpysAttachmentArr: "",
        kzxmclAttachmentArr: "",
        ysrymdAttachmentArr: "",
        ysryzpAttachmentArr: "",
        jpysAttachment: [],
        kzxmclAttachment: [],
        ysrymdAttachment: [],
        ysryzpAttachment: []
      }
    });
    const userList = ref([]); // 人员列表数据
    const formRules = ref({
      insMethod: [
        { required: true, message: "请输入检查方法", trigger: "change" }
      ],
      isQualifiedCheck: [
        { required: true, message: "请选择是否合格", trigger: "change" }
      ],
      jpysAttachment: [
        { required: true, message: "请上传举牌验收照片", trigger: "change" }
      ],
      kzxmclAttachment: [
        {
          required: true,
          message: "请上传主要控制项目测量照片",
          trigger: "change"
        }
      ],
      ysrymdAttachment: [
        { required: true, message: "请上传验收人员名单", trigger: "change" }
      ],
      ysryzpAttachment: [
        { required: true, message: "请上传验收人员照片", trigger: "change" }
      ],
      insSummary: [
        { required: true, message: "请输入检查小结", trigger: "change" }
      ],
      partybHandlerInfo: [
        { required: true, message: "请选择乙方处理人", trigger: "change" }
      ]
    });
    //获取项目组成员
    const getUserData = async (query = "") => {
      if (!query) {
        userList.value = [];
        return;
      }
      try {
        const params = {
          pageNum: 1,
          pageSize: 100,
          nameLike: query
        };
        const { code, data } = await getUserList(params);
        if (code === 200) {
          userList.value = data.list.map(item => {
            return { value: item.id, label: `${item.name}(${item.userName})` };
          });
        }
      } catch (err) {
        console.log(err);
      }
    };

    // 文件上传
    const handleRemove = (file, fileList, num) => {
      if (num === "1") {
        state.formData.jpysAttachment = fileList;
      } else if (num === "2") {
        state.formData.kzxmclAttachment = fileList;
      } else if (num === "3") {
        state.formData.ysrymdAttachment = fileList;
      } else if (num === "4") {
        state.formData.ysryzpAttachment = fileList;
      }
      console.log(file, fileList, num, "handleRemove");
    };

    const handleChange = (file, fileList, num) => {
      if (num === "1") {
        state.formData.jpysAttachment = fileList;
        formDataRef.value.clearValidate("jpysAttachment");
      } else if (num === "2") {
        state.formData.kzxmclAttachment = fileList;
        formDataRef.value.clearValidate("kzxmclAttachment");
      } else if (num === "3") {
        state.formData.ysrymdAttachment = fileList;
        formDataRef.value.clearValidate("ysrymdAttachment");
      } else if (num === "4") {
        state.formData.ysryzpAttachment = fileList;
        formDataRef.value.clearValidate("ysryzpAttachment");
      }
      console.log(file, fileList, num, "handleChange");
    };

    const handleSuccess = (file, fileList) => {
      console.log(file, fileList, "handleSuccess");
    };

    const validate = async () => {
      const isValid = await new Promise(resolve =>
        formDataRef.value.validate(resolve)
      );
      return isValid;
    };

    return {
      formDataRef,
      formRules,
      show,
      getUserData,
      userList,
      ...toRefs(state),
      uploadUrl,
      acceptTypes,
      uploadHeaders,
      handleChange,
      handleSuccess,
      handleRemove,
      handleError,
      handlePreview,
      beforeAvatarUpload,
      validate
    };
  }
});
</script>
<style lang="scss" scoped>
:deep .back-picture {
  .el-upload-list__item {
    width: 56px;
    height: 56px;
    .el-upload-list__item-actions {
      font-size: 18px;
    }
  }
  .el-upload--picture-card {
    width: 56px;
    height: 56px;
    background: #fdfdff;
    border-radius: 4px;
    border: 1px solid #e4e8f2;
    i {
      height: 100%;
      width: 100%;
      line-height: 100%;
      font-size: 18px;
      color: #8c939d;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8895b7;
      }
    }
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
